<template>
	<view class="text-28 page">
		<!-- 	<view class="flex-start">
			<view class="chooseTime">时间选择</view>
			<view class="timeChoose flex-between" @click="selectTime">
				<view v-if="!selectTimevalue" class="text-blue">选择时间</view>
				<view v-else>{{selectTimevalue}}</view>
				<image style="width:28rpx;height:13rpx;"
					src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/xialasmall@2x.png" mode="aspectFill">
				</image>
			</view>
		</view>
		<view class="flex-start" style="margin:20rpx 0;">
			<view class="chooseTime">压测带宽</view>
			<view>55.38Mbps*1=55.38Mbp</view>
		</view>
		<view class="flex-between" style="margin:20rpx 0;">
			<view class="chooseTime">压测结论</view>
			<view @click="showYaCeJie">
				<image style="width:28rpx;height:28rpx;"
					src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/shuoming@2x.png" mode="aspectFill">
				</image>
			</view>
		</view> -->

		<!-- 间隙 -->
		<!-- <up-gap height="10" bgColor="#1F1757"></up-gap> -->

		<!-- 上行带宽 -->
		<view style="padding:0 0 30rpx 0;box-sizing: border-box;">
			<view>
				<image style="width:17rpx;height:22rpx;"
					src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/biaotizhixiang@2x.png" mode="aspectFill">
				</image>
				总体压测情况
			</view>

			<view style="margin-top: 20rpx;">
				总压测时间:
				{{qualityData.pressureVOs[0].pressureTime ? timeFormat(qualityData.pressureVOs[0].pressureTime, "hh:MM:ss") : '--'}}
			</view>


			<!-- 压测内容 -->
			<!-- <view class="flex" style="margin-top:20rpx;">
				<view class="xianYaHead ">
					<view class="text-blue ">
						<view>线路</view>
						<view>总数</view>
					</view>
					<view class="yaCeValue flex-column-center">1</view>
				</view>
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="zongYaCe  bg-blue">
						<view class="text-blue ">
							<view>丢包压测</view>
							<view>满意度</view>
						</view>
						<view class="yaCeValue flex-column-center">1</view>
					</view>
					<view class="zongYaCe  bg-blue">
						<view class="text-blue ">
							<view>丢包压测带宽</view>
							<view>平均(Mbps)</view>
						</view>
						<view class="yaCeValue flex-column-center">1</view>
					</view>
					<view class="zongYaCe  bg-blue">
						<view class="text-blue ">
							<view>总TCP重 </view>
							<view>传率</view>
						</view>
						<view class="yaCeValue flex-column-center">1</view>
					</view>
					<view class="zongYaCe  bg-blue">
						<view class="text-blue ">
							<view>总极限压 </view>
							<view>测满意度</view>
						</view>
						<view class="yaCeValue flex-column-center">1</view>
					</view>
					<view class="zongYaCe  bg-blue">
						<view class="text-blue ">
							<view>总极限压 </view>
							<view>测满意度</view>
						</view>
						<view class="yaCeValue flex-column-center">1</view>
					</view>
					<view class="zongYaCe  bg-blue">
						<view class="text-blue ">
							<view>总极限带 </view>
							<view>宽时RTT</view>
						</view>
						<view class="yaCeValue flex-column-center">1</view>
					</view>
					<view class="zongYaCe  bg-blue">
						<view class="text-blue">
							<view>极限总带 </view>
							<view>宽(Mbps)</view>
						</view>
						<view class="yaCeValue flex-column-center">1</view>
					</view>

				</scroll-view>
			</view> -->

		</view>

		<!-- 间隙 -->
		<up-gap height="10" bgColor="#1F1757"></up-gap>

		<!-- 上行带宽 -->
		<view style="padding:30rpx 0;box-sizing: border-box;">
			<view style="margin-bottom: 15rpx;">
				<image style="width:17rpx;height:22rpx;"
					src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/biaotizhixiang@2x.png" mode="aspectFill">
				</image>
				线路压测情况
			</view>

			<!-- 压测内容 -->
			<view class="flex" style="margin-top:20rpx;">
				<view class="zongYaHead ">
					<view class="text-blue yaHead flex-column-center">
						<view>线路</view>
					</view>
					<!-- <view class="yaCeValue flex-column-center">标准值</view> -->
					<view class="yaCeValue flex-column-center">
						<view>{{qualityData.pressureVOs[0].lineVOS[0].lineName || '--'}}</view>
						<view>{{qualityData.pressureVOs[0].lineVOS[0].ip || '--'}}</view>
					</view>
				</view>
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="zongYaCe  bg-blue">
						<view class="text-blue yaHead flex-column-center">
							<view>建设带宽</view>
							<view>(Mbps)</view>
						</view>
						<!-- <view class="yaCeValue flex-column-center">1</view> -->
						<view class="yaCeValue flex-column-center">
							{{qualityData.pressureVOs[0].lineVOS[0].expectedBw || '--'}}
						</view>
					</view>
					<view class="zongYaCe  bg-blue">
						<view class="text-blue yaHead flex-column-center">
							<view>极限带宽</view>
							<view>(Mbps)</view>
						</view>
						<!-- <view class="yaCeValue flex-column-center">1</view> -->
						<view class="yaCeValue flex-column-center">
							{{qualityData.pressureVOs[0].lineVOS[0].actualBw || '--'}}
						</view>
					</view>
					<view class="zongYaCe  bg-blue">
						<view class="text-blue yaHead flex-column-center">
							<view>极限带宽</view>
							<view>时 RTT</view>
						</view>
						<!-- <view class="yaCeValue flex-column-center">1</view> -->
						<view class="yaCeValue flex-column-center">
							{{qualityData.pressureVOs[0].lineVOS[0].rtt || '--'}}ms
						</view>
					</view>
					<view class="zongYaCe  bg-blue">
						<view class="text-blue yaHead flex-column-center">
							<view>极限带宽</view>
							<view> tcp 重传率</view>
						</view>
						<!-- <view class="yaCeValue flex-column-center">1</view> -->
						<view class="yaCeValue flex-column-center">
							{{qualityData.pressureVOs[0].lineVOS[0].tcpRetryMissRate || '--'}}ms
						</view>
					</view>
					<view class="zongYaCe  bg-blue">
						<view class="text-blue yaHead flex-column-center">
							<view>重传率时带 </view>
							<view>宽Mbps</view>
						</view>
						<!-- <view class="yaCeValue flex-column-center">1</view> -->
						<view class="yaCeValue flex-column-center">
							{{qualityData.pressureVOs[0].lineVOS[0].limitBw || '--'}}
						</view>
					</view>
					<!-- <view class="zongYaCe  bg-blue">
						<view class="text-blue yaHead flex-column-center">
							<view>极限总带 </view>
							<view>宽(Mbps)</view>
						</view>
						<view class="yaCeValue flex-column-center">72.55%</view>
					</view> -->

				</scroll-view>
			</view>

		</view>

		<!-- 间隙 -->
		<!-- <up-gap height="10" bgColor="#1F1757"></up-gap> -->

		<!-- 上行带宽 -->
		<!-- 		<view style="padding:30rpx 0;box-sizing: border-box;">
			<view>压测带宽与重传率趋势
				<text class="text-22 text-blue">(点击上方表格线路切换线路)</text>
			</view>
			<view class="flex-start" style="margin:14rpx 0;">
				<view>切换路线</view>
				<view class="luChoose flex-between" @click="selectXianLu">
					{{selectXian}}
					<image style="width:28rpx;height:13rpx;"
						src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/xialasmall@2x.png" mode="aspectFill">
					</image>
				</view>
			</view>
			<yaCe></yaCe>
		</view> -->

		<!-- 切换线路弹窗 -->
		<up-picker :show="showXian" :columns="columnsList" keyName="label" @change="xianChange" @confirm="confirmLuBtn"
			@cancel="cancelLuBtn"></up-picker>

		<!-- 时间插件 -->
		<up-datetime-picker ref="datetimePickerRef" :show="showTime" v-model="qualityTime" mode="datetime"
			@confirm="confirmTime" @cancel="cancelTime"></up-datetime-picker>

		<!-- <up-popup bgColor="#141039" :show="yaCeShow" :round="10" mode="bottom" @close="close" @open="open">
			<view>
				<view class="flex-between diaoTitle text-white">
					<view class="text-30">压测指标说明</view>
					<up-icon name="close" color="#5A669E" size="20" @click="closeYa"></up-icon>
				</view>
				<view class="w690 kuaSheng">
					<view>
						<view style="margin-bottom: 15rpx;">
							<image style="width:17rpx;height:22rpx;"
								src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/biaotizhixiang@2x.png"
								mode="aspectFill">
							</image>
							线路压测情况
						</view>
						<view class="text-blue">
							极限带宽建议值:用户压测的单线路带宽丢包压测满意度:极限带宽/单线路带宽极限带宽时RTT:压测到极限带宽时的
							RTT压测满意度:单线路丢包压测带宽/建设带宽TCP重传率:压测到极限带宽时的 tcp 平均重传率
						</view>
					</view>

					<view>
						<view style="margin: 15rpx 0;">
							<image style="width:17rpx;height:22rpx;"
								src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/biaotizhixiang@2x.png"
								mode="aspectFill">
							</image>
							线路不满足业务方要求，如何调整?
						</view>
						<view class="text-blue">
							调整网络或降低节点带宽
						</view>
					</view>

					<view>
						<view style="margin: 15rpx 0;">
							<image style="width:17rpx;height:22rpx;"
								src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/biaotizhixiang@2x.png"
								mode="aspectFill">
							</image>
							为什么同一个节点，带宽没变的情况下，线路丢包满意度有时90%可以过，有时要95%以上
						</view>
						<view class="text-blue">
							这与您选择的业务有关，不同业务的质量标准要求不同
						</view>
					</view>

					<view class="text-red" style="margin:20rpx 0;">*以上信息供您参考</view>

				</view>
			</view>
		</up-popup> -->

	</view>
</template>

<script setup>
	import yaCe from "../../../../components/chart/yaCe.vue"
	import * as api from "@/utils/api.js"
	import {
		timeFormat
	} from 'uview-plus';
	import {
		ref,
		reactive,
		onMounted,
		inject,
		defineProps
	} from 'vue';

	// 接收质量报告
	const props = defineProps({
		nodeId: {
			type: String,
			default: "",
		}
	})
	let imageUrl = ref("");
	onMounted(() => {
		// 全局变量引入
		const globalData = inject('globalData');
		imageUrl.value = globalData.value.imgOssUrl;

		// 获取质量报告
		getQuality();
	})

	// 质量报告数据
	const qualityData = ref({
		pressureVOs: [{
			lineVOS: [{
				expectedBw: "",
				actualBw: "",
				rtt: "",
				tcpRetryMissRate: "",
				limitBw: ""
			}]
		}]
	});

	// 获取质量报告
	const getQuality = () => {
		let e = {
			url: "/app-api/device/node/qualityreport",
			data: {
				nodeId: props.nodeId ? props.nodeId : 'antd47b41f009dda857030050853fd1d'
			}
		}
		api.default.get(e).then((res) => {
			qualityData.value = res.data;
		})
	}
	// 压测说明弹窗
	const yaCeShow = ref(false);

	// 显示压测说明
	const showYaCeJie = () => {
		yaCeShow.value = true;
	}

	// 关闭压测说明
	const closeYa = () => {
		yaCeShow.value = false;
	}


	// 显示时间
	const showTime = ref(false);


	// 绑定时间
	const qualityTime = ref();

	const selectTimevalue = ref();

	const selectTime = () => {
		showTime.value = true;
	}

	// 确认时间
	const confirmTime = () => {
		showTime.value = false;
		console.log("qualityTime", timeFormat(qualityTime.value, "yyyy-mm-dd hh:MM:ss"));
		selectTimevalue.value = timeFormat(qualityTime.value, "yyyy-mm-dd hh:MM:ss");
	}

	// 确认时间
	const cancelTime = () => {
		showTime.value = false;
	}

	// 切换线路
	const selectXian = ref("etho")
	// 线路列表
	const columnsList = reactive([
		[{
			label: 'etho',
			// 其他属性值
			id: 0
			// ...
		}, {
			label: 'etho00',
			// 其他属性值
			id: 0
			// ...
		}]
	]);

	// 切换弹窗
	const showXian = ref(false);

	// 选择线路
	const selectXianLu = () => {
		showXian.value = true;
	}

	// 选择线路的下表
	const xianBiao = ref();

	// 线路发生改变
	const xianChange = (val) => {
		xianBiao.value = val.index;
	}

	// 关闭切换线路
	const cancelLuBtn = () => {
		showXian.value = false;
	}

	// 确认切换线路
	const confirmLuBtn = () => {
		selectXian.value = columnsList[0][xianBiao.value].label
		showXian.value = false;
	}
</script>

<style scoped>
	.page {
		padding-top: 40rpx;
	}

	.diaoTitle {
		height: 100rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.yaCeValue {
		height: 80rpx;
	}

	.yaHead {
		height: 80rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 700rpx;
		overflow-x: auto;
		/* overflow-x: auto; */
	}

	.zongYaHead {
		/* min-width: 190rpx; */
		padding: 10rpx;
		box-sizing: border-box;
		background-color: #292067;
		text-align: center;
	}

	.xianYaHead {
		min-width: 100rpx;
		padding: 10rpx 0;
		box-sizing: border-box;
		background-color: #292067;
		text-align: center;
	}

	.zongYaCe {
		/* 	width: 180rpx !important; */
		display: inline-block;
		padding: 10rpx 15rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.chooseTime {
		padding: 10rpx 0;
		box-sizing: border-box;
		margin-right: 20rpx;
	}

	.timeItem {
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		background: #18153E;
		border-radius: 8rpx;
		border-radius: 8rpx;
		margin-right: 10rpx;
	}

	.page /deep/ .u-cell__body {
		color: #fff;
		font-size: 26rpx;
	}

	.page /deep/ .u-collapse-item,
	.page /deep/ .u-cell,
	.page /deep/ .u-cell__body {
		background-color: transparent;
	}

	.page /deep/ .u-line {
		height: 0px !important;
	}

	.page /deep/ .u-collapse-item__content__text {
		padding: 10rpx 30rpx !important;
		box-sizing: border-box;
	}

	.page /deep/ .u-cell__body {
		padding: 14rpx 30rpx !important;
		box-sizing: border-box;
		border-bottom: 2rpx solid #1F1757;
	}

	/* 	.page /deep/ .u-cell__body:not(:last-child) {
		border-bottom: 2rpx solid #1F1757;
	} */

	.shouYiHead {
		height: 60rpx;
		line-height: 60rpx;
		/* background: #1F1757; */
		border-radius: 12rpx 12rpx 0rpx 0rpx;
	}

	.activeTime,
	.activeLi {
		background: #291E6F;
	}

	.defaultTime,
	.defaultLi {
		background: #18153E;
	}

	.luChoose {
		width: 500rpx;
		height: 72rpx;
		background: #141039;
		border-radius: 8rpx;
		border: 2rpx solid rgba(22, 179, 255, 0.25);
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-left: 20rpx;
	}

	.timeChoose {
		width: 400rpx;
		height: 72rpx;
		background: #141039;
		border-radius: 8rpx;
		border: 2rpx solid rgba(22, 179, 255, 0.25);
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-left: 20rpx;
	}

	/* .page /deep/ .uni-picker-view-mask {
		background-image: none !important;
	} */

	.page /deep/ .u-picker__view__column__item {
		/* color: #fff; */
	}
</style>